<template>
  <view class="bg-fff min-h-screen p-4">
    <!-- 标题 -->
    <view class="mb-3 text-2xl font-bold">
      隐私与权限设置
    </view>
    <view class="mb-4 text-sm text-gray-600">
      我们重视您的隐私。本页面说明我们会如何使用必要权限，并允许您自主开启 / 关闭某些权限。
    </view>

    <!-- 隐私承诺卡片 -->
    <view class="mb-4 rounded-lg p-4">
      <view class="mb-2 text-lg font-semibold">
        我们的承诺
      </view>
      <view class="text-sm text-gray-700 leading-6">
        • 仅为实现核心功能按需请求权限（例如上传图片、定位周边服务）。<br>
        • 不会收集与服务无关的隐私数据。<br>
        • 您的数据将仅用于提供服务，并在您请求时删除。<br>
      </view>
      <uv-divider class="my-3" />
      <view class="text-sm text-gray-600">
        若需详细隐私政策，请查看 <text class="text-blue-600 underline" @click="openPolicy">隐私政策全文</text>。
      </view>
    </view>

    <!-- 权限设置列表 -->
    <view class="mb-4 rounded-lg p-0">
      <!-- 相机 -->
      <uv-cell title="相机权限" class="px-4 py-3">
        <template #label>
          <view class="text-sm text-gray-700">
            用于扫码、拍照上传截图等功能。
          </view>
        </template>
        <template #right-icon>
          <switch :checked="permissions.camera" @change="onToggle('camera')" />
        </template>
      </uv-cell>
      <uv-divider />

      <!-- 相册 / 存储 -->
      <uv-cell title="相册/存储" class="px-4 py-3">
        <template #label>
          <view class="text-sm text-gray-700">
            用于从本地选择图片并上传。
          </view>
        </template>
        <template #right-icon>
          <switch :checked="permissions.album" @change="onToggle('album')" />
        </template>
      </uv-cell>
      <uv-divider />

      <!-- 定位 -->
      <uv-cell title="定位权限" class="px-4 py-3">
        <template #label>
          <view class="text-sm text-gray-700">
            用于定位附近服务并优化体验（可选）。
          </view>
        </template>
        <template #right-icon>
          <switch :checked="permissions.location" @change="onToggle('location')" />
        </template>
      </uv-cell>
      <uv-divider />

      <!-- 推送通知 -->
      <uv-cell title="通知权限" class="px-4 py-3">
        <template #label>
          <view class="text-sm text-gray-700">
            用于重要通知、订单状态提醒（可选）。
          </view>
        </template>
        <template #right-icon>
          <switch :checked="permissions.push" @change="onToggle('push')" />
        </template>
      </uv-cell>
    </view>

    <!-- 说明 / 细则折叠（简洁版） -->
    <view class="mb-4 rounded-lg p-4">
      <view class="mb-2 text-base font-semibold">
        收集与使用说明
      </view>
      <view class="mb-3 text-sm text-gray-700 leading-6">
        我们仅在您允许的情况下收集以下信息并仅用于下列目的：
      </view>
      <view class="mb-2 text-sm text-gray-700">
        • 图片：用于问题反馈、身份验证或内容上传。
      </view>
      <view class="mb-2 text-sm text-gray-700">
        • 定位：用于附近服务和位置推荐，未经您的允许不会主动上传位置信息。
      </view>
      <view class="mb-2 text-sm text-gray-700">
        • 通知标识：用于向您推送重要信息（您可随时关闭）。
      </view>
      <uv-divider class="my-3" />
      <view class="text-sm text-gray-500">
        注：若您拒绝某些权限，部分功能可能受限，但核心功能仍可使用。
      </view>
    </view>

    <!-- 保存按钮 -->
    <uv-button
      type="primary"
      class="w-full rounded-lg py-3"
      @click="saveSettings"
    >
      保存设置
    </uv-button>
  </view>
</template>

<script lang="ts" setup>
import { toast } from '@climblee/uv-ui/libs/function/index.js'
import { reactive } from 'vue'
import { UrlPath } from '@/constants'

definePage({
  style: {
    navigationBarTitleText: '隐私与权限设置',
    navigationBarBackgroundColor: '#FFFFFF',
  },
})
// 权限状态，实际项目可以从后端或本地缓存读取
const permissions = reactive({
  camera: false,
  album: false,
  location: false,
  push: true,
})

// 点击详细说明
function openPolicy() {
  uni.navigateTo({ url: `/pages/web-content/web-content?title=隐私政策&url=${UrlPath.privacyUrl}` })
}

// 用户切换权限（可以在这里做埋点或权限申请）
function onToggle(key: keyof typeof permissions) {
  // 示例：如果开启相机，尝试调用平台 API 请求权限（仅示例）
  if (permissions[key]) {
    toast(`${permLabel(key)} 已开启`)
  }
  else {
    toast(`${permLabel(key)} 已关闭`)
  }
}

// 保存设置（示例：保存到本地或调用后端接口）
function saveSettings() {
  // 在真实项目中把 settings 发送给后端或写到缓存
  try {
    uni.setStorageSync('privacy_permissions', JSON.stringify(permissions))
    toast('设置已保存')
  }
  catch (err) {
    toast('保存失败，请重试')
  }
}

function permLabel(key: keyof typeof permissions) {
  switch (key) {
    case 'camera':
      return '相机权限'
    case 'album':
      return '相册权限'
    case 'location':
      return '定位权限'
    case 'push':
      return '通知权限'
  }
}
</script>

<style lang="scss" scoped>
/* 下面是一些小调整，优先使用 UnoCSS，但这里留了少量样式以防需要 */
.min-h-screen {
  min-height: 100vh;
}
.bg-fff {
  background: #ffffff;
}
</style>
